<template>
  <div class='rbox'>
      <h1>节点二</h1>
      <form name="jiedian_1">
        <div class="box">
          <p>定时</p>
          <div class="clock">
            <button @click="add1">+</button>
            <span>&nbsp;{{ shuzi1 }}</span>
            <button @click="sub1">-</button>
          </div>
          <div class="clock">
            <button @click="add2">+</button>
            <span>&nbsp;{{ shuzi2 }}&nbsp;:</span>
            <button @click="sub2">-</button>
          </div>
          <div class="clock">
            <button @click="add3">+</button>
            <span>&nbsp;{{ shuzi3 }}</span>
            <button @click="sub3">-</button>
          </div>
          <div class="clock">
            <button @click="add4">+</button>
            <span>&nbsp;{{ shuzi4 }}</span>
            <button @click="sub4">-</button>
          </div>
        </div>
        <div class="box">
          <p>功能</p>
          <select v-model="value01">
            <option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </option>
          </select>
          <el-radio v-model="radio01" label="1">开</el-radio>
          <el-radio v-model="radio01" label="0">关</el-radio>
        </div>
        <input type="button" class="btn" value="提交" @click="jd1" />
      </form>
    </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: '',
          label: '->请选择<-'
        },
        {
          value: 'LED',
          label: '灯光'
        },
        {
          value: 'FAN',
          label: '通风扇'
        },
        {
          value: 'SP',
          label: '消防水泵'
        },
        {
          value: 'BEEP',
          label: '警报'
        },
        {
          value: 'SUN',
          label: '遮阳棚'
        }
      ],
      value01: '',
      value02: '',
      value03: '',
      radio01: '2',
      radio02: '2',
      radio03: '2',
      shuzi1: 0,
      shuzi2: 0,
      shuzi3: 0,
      shuzi4: 0,
      shuzi5: 0,
      shuzi6: 0,
      shuzi7: 0,
      shuzi8: 0,
      shuzi9: 0,
      shuzi10: 0,
      shuzi11: 0,
      shuzi12: 0
    }
  },
  methods: {
    /* eslint-disable eqeqeq */
    jd1: function () {
      console.log('Hello')
      console.log(this.shuzi1, this.shuzi2, this.shuzi3, this.shuzi4)

      if (this.value01 == 'LED') {
        if (this.radio01 == 1) {
          this.$http.post('/mqtt/mqtt', {'target': 'LED', 'value': 1}).then((res) => {
            this.temp = console.log(res)
          })
          console.log(this.value01)
          console.log(this.radio01)
        }
        if (this.radio01 == '0') {
          this.$http.post('/mqtt/mqtt', {'target': 'LED', 'value': 0}).then((res) => {
            this.temp = console.log(res)
          })
        }
      }
      if (this.value01 == 'FAN') {
        if (this.radio01 == 1) {
          this.$http.post('/mqtt/mqtt', {'target': 'FAN', 'value': 1}).then((res) => {
            this.temp = console.log(res)
          })
          console.log(this.value01)
          console.log(this.radio01)
        }
        if (this.radio01 == '0') {
          this.$http.post('/mqtt/mqtt', {'target': 'FAN', 'value': 0}).then((res) => {
            this.temp = console.log(res)
          })
        }
      }
      if (this.value01 == 'SP') {
        if (this.radio01 == 1) {
          this.$http.post('/mqtt/mqtt', {'target': 'SP', 'value': 1}).then((res) => {
            this.temp = console.log(res)
          })
          console.log(this.value01)
          console.log(this.radio01)
        }
        if (this.radio01 == '0') {
          this.$http.post('/mqtt/mqtt', {'target': 'SP', 'value': 0}).then((res) => {
            this.temp = console.log(res)
          })
        }
      }
      if (this.value01 == 'BEEP') {
        if (this.radio01 == 1) {
          this.$http.post('/mqtt/mqtt', {'target': 'BEEP', 'value': 1}).then((res) => {
            this.temp = console.log(res)
          })
          console.log(this.value01)
          console.log(this.radio01)
        }
        if (this.radio01 == '0') {
          this.$http.post('/mqtt/mqtt', {'target': 'BEEP', 'value': 0}).then((res) => {
            this.temp = console.log(res)
          })
        }
      }
      if (this.value01 == 'SUN') {
        if (this.radio01 == 1) {
          this.$http.post('/mqtt/mqtt', {'target': 'SUN', 'value': 1}).then((res) => {
            this.temp = console.log(res)
          })
          console.log(this.value01)
          console.log(this.radio01)
        }
        if (this.radio01 == '0') {
          this.$http.post('/mqtt/mqtt', {'target': 'SUN', 'value': 0}).then((res) => {
            this.temp = console.log(res)
          })
        }
      }
    },
    jd2: function () {
      console.log('Hello')
    },
    jd3: function () {
      console.log('Hello')
    },
    add1: function () {
      if (this.shuzi1 >= 2) this.shuzi1 = 0
      else {
        this.shuzi1++
      }
    },
    sub1: function () {
      if (this.shuzi1 <= 0) this.shuzi1 = 2
      else {
        this.shuzi1--
      }
    },
    add2: function () {
      if (this.shuzi2 >= 9) this.shuzi2 = 0
      else {
        this.shuzi2++
      }
    },
    sub2: function () {
      if (this.shuzi2 <= 0) this.shuzi2 = 9
      else {
        this.shuzi2--
      }
    },
    add3: function () {
      if (this.shuzi3 >= 5) this.shuzi3 = 0
      else {
        this.shuzi3++
      }
    },
    sub3: function () {
      if (this.shuzi3 <= 0) this.shuzi3 = 5
      else {
        this.shuzi3--
      }
    },
    add4: function () {
      if (this.shuzi4 >= 9) this.shuzi4 = 0
      else {
        this.shuzi4++
      }
    },
    sub4: function () {
      if (this.shuzi4 <= 0) this.shuzi4 = 9
      else {
        this.shuzi4--
      }
    },
    add5: function () {
      if (this.shuzi5 >= 2) this.shuzi5 = 0
      else {
        this.shuzi5++
      }
    },
    sub5: function () {
      if (this.shuzi5 <= 0) this.shuzi5 = 2
      else {
        this.shuzi5--
      }
    },
    add6: function () {
      if (this.shuzi6 >= 9) this.shuzi6 = 0
      else {
        this.shuzi6++
      }
    },
    sub6: function () {
      if (this.shuzi6 <= 0) this.shuzi6 = 9
      else {
        this.shuzi6--
      }
    },
    add7: function () {
      if (this.shuzi7 >= 5) this.shuzi7 = 0
      else {
        this.shuzi7++
      }
    },
    sub7: function () {
      if (this.shuzi7 <= 0) this.shuzi7 = 5
      else {
        this.shuzi7--
      }
    },
    add8: function () {
      if (this.shuzi8 >= 9) this.shuzi8 = 0
      else {
        this.shuzi8++
      }
    },
    sub8: function () {
      if (this.shuzi8 <= 0) this.shuzi8 = 9
      else {
        this.shuzi8--
      }
    },
    add9: function () {
      if (this.shuzi9 >= 2) this.shuzi9 = 0
      else {
        this.shuzi9++
      }
    },
    sub9: function () {
      if (this.shuzi9 <= 0) this.shuzi9 = 2
      else {
        this.shuzi9--
      }
    },
    add10: function () {
      if (this.shuzi10 >= 9) this.shuzi10 = 0
      else {
        this.shuzi10++
      }
    },
    sub10: function () {
      if (this.shuzi10 <= 0) this.shuzi10 = 9
      else {
        this.shuzi10--
      }
    },
    add11: function () {
      if (this.shuzi11 >= 5) this.shuzi11 = 0
      else {
        this.shuzi11++
      }
    },
    sub11: function () {
      if (this.shuzi11 <= 0) this.shuzi11 = 5
      else {
        this.shuzi11--
      }
    },
    add12: function () {
      if (this.shuzi12 >= 9) this.shuzi12 = 0
      else {
        this.shuzi12++
      }
    },
    sub12: function () {
      if (this.shuzi12 <= 0) this.shuzi12 = 9
      else {
        this.shuzi12--
      }
    }
  }
}
</script>

<style>
.btn {
  margin-left: 25%;
  width:50%;
  height:100px;
  font-size:50px;
}
.clock button {
  width:40px;
  height: 35px;
}
.rbox h1 {
  margin-left:43%;
}
.box {
  width: 70%;
  height: 250px;
  margin-left: 15%;
  margin-bottom: 30px;
  border-style: solid;
  border-radius: 10px;
  border-width: 1.5px;
  box-shadow: 0 0 5px 5px rgb(200, 200, 200);
  float: left;
}
.box p{
  margin-left:41%;
  margin-bottom: 13px;
  font-size:30px;
}
.clock {
  margin-left: 12%;
  width: 42px;
  font-size: 35px;
  float: left;
}
.box select {
  margin-left: 33%;
  font-size: 20px;
  float: left;
}
.el-radio {
  float:left;
  margin-top:40px;
  margin-left: 23%;
}
</style>
